// 在此处写某类样式，是由于在嵌套中书写样式不会生效
// 当所写样式不生效时，应该考虑将其拿出来单独书写




// .el-cascader-menu__list,


// 首页左侧分类与中间轮播图：目的是让左侧分类子级在轮播图的上方（这样才能点击菜单中的选项
.el-cascader-menu

/* :last-child */
  {}


.home-menu {
  // -----------------------------------------为了测试样式增加的选项 2行---------------父元素设置flex布局，固定一边长度，其他自适应
  display: flex;
  flex-flow: row;

  .main-1 {
    box-sizing: border-box;
    height: 362px;
    width: 196px;
    padding: 10px 0 ;
    background: #333;
    color: #fff;

    z-index: 2;

    
    font-weight: 100;

    div {
      width: 100%;

      padding: 0 24px;
      height: 10%;
      line-height: 34px;
      background: #333;
      color: #b8b8b8;

      font-size: 14px;

      box-sizing: border-box;

      &[class^="el-icon"]:before {
        margin-right: 16px;

        color: #dbdbdb;
        font-size: 20px;
      }
    }



    ul {
      padding: 0 24px;

      overflow: hidden;
      height: 90%;
      background: #333;
      color: #fff;

      &.shouqi {

        overflow: hidden;
        height: 90%;
      }

      &.zhankai {

        // overflow: auto;
        height: auto;
      }




      li {

        width: 100%;

        height: 34px;
        // font-size: 18px;
        line-height: 34px;

        font-size: 14px;

        color: #b8b8b8;
        font-weight: 100;

        &[class^="el-icon"]:before {
          margin-right: 16px;

          color: #dbdbdb;
          font-size: 20px;
        }


        .el-link {

          text-decoration: none;
          color: inherit;
        }
      }
    }

    // z-index: 100;
    // -----------------------------------------为了测试样式改动的选项 1行
    // float: left;
    // -----------------------------------------为了测试样式改动的选项 1行  结束
    // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    
  }

  .main-2 {
    // -----------------------------------------为了测试样式改动的选项 1行---------------父元素设置flex布局，固定一边长度，其他自适应
    flex: 4;
    // float: left;

    // -----------------------------------------为了测试样式改动的选项 1行  结束
    // z-index: -100;
    height: 362px;
    width: 814px;
    padding: 0 13px;

    .main-2-1 {

      cursor: pointer;

      .el-image {

        width: 100%;
      }

      // z-index: -2;
      .el-carousel {
        .el-carousel__item.is-active {
          // z-index: -2;
        }

        .el-carousel__item h3 {
          color: #475669;
          font-size: 18px;
          opacity: 0.75;
          line-height: 361px;
          margin: 0;
        }

        .el-carousel__item:nth-child(2n) {
          background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n + 1) {
          background-color: #d3dce6;
        }
      }
    }
  }

  .main-3 {
    // -----------------------------------------为了测试样式改动的选项 1行---------------父元素设置flex布局，固定一边长度，其他自适应
    flex: 1;
    // float: left;
    // -----------------------------------------为了测试样式改动的选项 1行  结束
    width: 224px;
    height: 362px;

    .el-card {

      &.is-always-shadow {

        box-shadow: none;
        border-radius: 0;
      }
      .el-card-a {
        // -----------------清除链接默认样式--------------------------包括去除下划线，字体
        text-decoration: none;
        color: inherit;

        .el-image {

          padding-top: 50%;
        }

        &>div {

          padding: 14px;
          font-size: 14px;
          line-height: 1.2;
          font-weight: 100;
        }
      }

      img {
        height: 80%;
        width: 100%;
      }
    }
  }

}